<!--本案台账  -->
<template>
<div class='fieldList'>
    <div class="fieldList_selects" >
        <div class="fieldList_buildSelected">
            <Select v-model="buildingselected" placeholder="请选择" @on-change="getTableList(buildingselected)">
               <Option v-for="(item,index) in buildings" :key="index" :value="item.buildingId">{{item.buildingAlias}}</Option>
             </Select>
        </div>
        <Button class="fieldList_buttonEdit" v-if="buildings.length>0" @click="editField" type="primary">编辑本案台账</Button>
    </div>
    <div class="fieldList_titleList">
      <span v-for="(item,index) in titleList" @click="changeTable(item,index)" :key="item.name" :class="['fieldList_title',item.selected?'actived':'']">{{item.name}}</span>
    </div>
    <div class="fieldList_tableBox">
         <Table ref="TableHeight" :max-height="onresizeHeight" :columns="columns" :data="data" ></Table>
       <!-- 分页 -->
        <div class="pagePublicStyle" v-show="pageData.total > 0">
          <div class="totalCount"> 当前第 {{ pageData.current }} 页， 当前第 {{ (pageData.current - 1) * pageData.rows + 1 }} 条到第
            {{ pageData.current * pageData.rows > pageData.total ? pageData.total : pageData.current * pageData.rows}}
            条， 共 {{ pageData.total }} 条
          </div>
          <Page :total="pageData.total" :current="pageData.current" :page-size-opts="pageData.pageSizeOpts"
            @on-change="pageOnChangeFun" @on-page-size-change="pageOnPageSizeChangeFun" show-elevator show-sizer
            show-total  />
        </div>
    </div>
    <Modal  v-model="modal" title="编辑本案台账字段" footer-hide width="772" :closable="false">
        <div>
            <span>案场：</span>
            <span>{{currentBuilding}}</span>
        </div>
        <div>
            <div class="modal_buttons">
                 <!-- <span class="modal_buttons_span">本案台账列表字段</span> -->
                 <span class="modal_buttons_span">共{{allLen}}个字段，已选{{chooseLen}}个 <Button  @click="deleteField" type="primary">从台账中移除</Button></span>
                 <Button style="margin-right:10px"  @click="joinBuild" type="info">添加新字段</Button>
                 
            </div>
            <div class="module_tables">
              <div class="module_tables_left">
                 <span v-for="(item,index) in titleListM" @click="changeMoudleTable(item,index)" :key="item.name" :class="['module_tables_title',item.selected?'actived':'']">{{item.name}}</span> 
              </div>
              <Table ref="TableHeight" @on-selection-change="selectedChange" :max-height="400" :columns="columns1" :data="data1" ></Table>
            </div>
            <div class="module_fotter">
                 <Button style="margin-right:10px"  @click="chancleMoudle" type="warning">取消</Button>
                 <Button  @click="saveTableDatail" :disabled='saveTableflag' type="primary">确定</Button>
            </div> 
        </div>
    </Modal>
    <modal v-model="modalAdd" title="选择加入字段" footer-hide width="540">
        <div>
           <Table ref="TableHeight" @on-selection-change="selectedChangeAdd" :max-height="400" :columns="columns2" :data="data2" ></Table>
        </div>
        <div class="module_fotter">
           <Button style="margin-right:10px"  @click="modalAdd = false" type="warning">取消</Button>
           <Button  @click="addMoudleField" type="primary">确定</Button>
        </div> 
    </modal>
</div>
</template>

<script>
import {getStandingBookGetAllBuild, updateStandingBook,
 getStandingBookGetAllBuildPages,saveStandingBook, buildByPhone, 
 getstandingBookGetGroup,updateStandingBookUpdate,
 getstandingBookListBase
 } from "@/api/standBookList"
export default {
components: {},
data() {
return {
  allLen:0,
  chooseLen:0,
  saveTableflag:false,
  titleList:[
    {name:'全部',selected:true,value:'',key:"all"} ,
    {name:'基本信息',selected:false,value:'1',key:"baseInfoVos"},
    {name:'服务信息',selected:false,value:'2',key:"serviceInfoVos"},
    {name:'置业需求',selected:false,value:'3',key:"buyDemandVos"},
    {name:'客户画像',selected:false,value:'4',key:"customerInfoVos"}
  ],
  nameCompare:["baseInfoVos","serviceInfoVos","buyDemandVos","customerInfoVos"],
  titleListM:[],
  crruentTabindex:'0',
  crruentTabObj:{name:'全部',selected:true,value:'0',key:"all"} ,
  onresizeHeight:0,
  pageData: {
        total: 0,
        current: 1,
        rows: 10,
        pageSizeOpts: [10, 20, 30, 40, 50],
    },
    
  columns:[
    {
      title: "字段名称",
      key: "fieldValue",
      minWidth: 120,
      align:'center',
      render(h,params){
         let sd = params.row.fieldValue;
         return h("div", [
           params.row.fieldDescription?h('Tooltip',
           {
             props: {
              placement: 'right',
             },  
           },
           [
            h('span',params.row.fieldValue),
            h('Icon',{
              props: {
               type: 'ios-help',
              },
              style:{
                fontWeight: '700',
                fontSize: '14px',
                color: 'red',
                border: '1px solid red',
                borderRadius: '50%',
                marginLeft: '5px'
              }
             }) ,
             h('div',{
               slot: 'content'
             },params.row.fieldDescription)
            
           ]):h('span',params.row.fieldValue)
         ])
      }
    },
    {
      title: "是否必填",
      key: "ifRequired",
      minWidth: 120,
      align:'center',
       render(h,params){
         return h("div",params.row.ifRequired == 1?'是':'否')
       }
    },
    // {
    //   title: "公司统一要求",
    //   key: "companyRules",
    //   minWidth: 120,
    //   align:'center',
    //   render(h,params){
    //     return h("div",params.row.companyRules == 1?'是':'否')
    //   }
    // },    
    {
      title: "字段属性",//1: 系统字段 2: 默认字段 3:扩展字段
      key: "fieldType",
      minWidth: 120,
      align:'center',
      render(h,params){
        return h("div",params.row.fieldType == 1?'系统字段':params.row.fieldType == 2?'默认字段':params.row.fieldType == 3?'扩展字段':'-')
      }
    },  
    {
      title: "类型",
      key: "inputType",
      minWidth: 120,
      align:'center',
      render(h,params){
       let inputType= params.row.inputType;
       return h("div",inputType == 1?'填空':inputType == 2?'单选':'多选')
      }
    },
    {
      title: "状态",
      key: "validate",
      minWidth: 120,
      align:'center',
      render(h,params){
       return h("div",params.row.validate == 1?'启用':'禁用')
      }
    },
    {
      title: "样式",
      key: "styleType",
      minWidth: 120,
      align:'center',
      render:(h,params)=>{
       return h("div",this.styleType[params.row.styleType-1])
      }
    },    
    {
      title: "内容",
      key: "content",
      minWidth: 230,
      align:'center',
      render:(h,params)=>{
          let {inputType, content, fieldUnit, options} =  params.row;
       return h("div",
          !!content && !!fieldUnit ?`${content}, 单位为${fieldUnit}`:!!content?content:!!fieldUnit?`单位为${fieldUnit}`:''
       )}
    },
    {
      title: "信息分类",
      key: "infoType",
      minWidth: 120,
      align:'center',
      render:(h,params)=>{
       return h("div",this.messageSort[params.row.infoType-1]?this.messageSort[params.row.infoType-1].name:"-")
      }
    }  
  ],
  columns1:[
    {
      type: 'selection',
      width: 60,
      align: 'center',
      render(h,params){
         return h("span",'test')  
      }
    },
    {
      title: "序号",
      key: "name",
      minWidth: 80,
      align:'center',
      render(h,params){
         return h("div",params.row._index-0+1)  
      }
    },
    {
      title: "字段名称",
      key: "fieldValue",
      minWidth: 180,
      align:'center'
    },
    {
      title: "是否必填",
      key: "ifRequired",
      minWidth: 280,
      align:'center',
      render:(h,params) =>{
         return h("div",[
           params.row.fieldType == 2 || params.row.fieldType == 1
             ?params.row.ifRequired == 1?'必填':'选填'
             : h("i-switch",{
                 props:{
                     size:'large',
                     value:params.row.ifRequired == 1
                 },
                 on:{
                  'on-change':(value)=>{
                    console.log(656565,value, params.row);
                    this.changeIfrequird(params.row,value)
                  }
                 },
                 },[
                 h("span",{slot:'open'},'必填'),
                 h("span",{slot:'close'},'选填')
            ])
         ])  
      }
    },    
   
    
  ],
  moveTable: {
      key:'move',
      title: "上移/下移",
      minWidth: 140,
      align:'center',
      render: (h, params) => {
        console.log(params,params.row);
         let ci = this.currentMoudleSelected?this.dataObj[this.currentMoudleSelected].length-1:this.dataArray.length-1;
         return h("div",[
             h("Icon",{
              props: {
               type: 'md-arrow-round-up',
              },
              style:{
               fontSize:'22px',
               color:params.row._index == params.row.count?'#ccc':'#2d8cf0',
               cursor: 'pointer',
               display: params.row._index >= params.row.count?'inline-block':'none',
               width:'30%'
              },
              on:{
                click: (e) => {
                  if(params.row._index == params.row.count)return;
                   this.moveUpName(params.row)    
                }
              }
             }),
             h("Icon",{
              props: {
               type: 'md-arrow-round-down',
              },
               style:{
                fontSize:'22px',
                color: ci == params.index?'#ccc': 'red',
                cursor: 'pointer',
                display: params.row._index >= params.row.count?'inline-block':'none',
                width:'30%'
              },
              on:{
                 click: (e) => {
                   if( ci == params.index)return;
                   this.moveDownName(params.row)    
                }
              }
             }),
         ])  
      }
    },
  columns2:[
   {
      type: 'selection',
      width: 60,
      align: 'center'
    },
    {
      title: "序号",
      key: "name",
      minWidth: 80,
      align:'center',
      render(h,params){
         return h("div",params.row._index-0+1)  
      }
    },
    {
      title: "字段名称",
      key: "name",
      minWidth: 180,
      align:'center',
     render(h,params){
         let sd = params.row.fieldValue;
         return h("div", [
           params.row.fieldDescription?h('Tooltip',
           {
             props: {
              placement: 'right',
             },  
           },
           [
            h('span',params.row.fieldValue),
            h('Icon',{
              props: {
               type: 'ios-help',
              },
              style:{
                fontWeight: '700',
                fontSize: '14px',
                color: 'red',
                border: '1px solid red',
                borderRadius: '50%',
                marginLeft: '5px'
              }
             }) ,
             h('div',{
               slot: 'content'
             },params.row.fieldDescription)
            
           ]):h('span',params.row.fieldValue)
         ])
      }
    },
    {
      title: "内容",
      key: "content",
      minWidth: 180,
      align:'center',
      render:(h,params)=>{
          let {inputType, content, fieldUnit, options} =  params.row;
       return h("div",
        inputType == 1
          ?content + (!!fieldUnit?`, 单位为${fieldUnit}`:'')
          :options && options.length>0?options.join("、"):'')
      }
    },
  ],
  data:[],
  dataArray:[],
  dataObj:{
   baseInfoVos:[],
   buyDemandVos:[],
   customerInfoVos:[],
   serviceInfoVos:[]
  },
  data1:[],
   data2:[
    // {name:'客户姓名',content:"填写客户的名字"},
    // {name:'性别',content:"填写男女"},
    // {name:'家庭结构',content:"填写家庭的组织"}
  ],
  modal:false,
  formValidate:{
    type:'1'
  },
  ruleValidate:{

  },
  buildings:[],
  buildingselected:'',
  selectedArray:[],
  modalAdd:false,
  addSelected:[],
  styleType:['单行平铺','多行平铺','平铺多级联动','弹框列表','弹框多级联动'],
  messageSort:[
    {name:'基本信息',value:'1'},
    {name:'服务信息',value:'2'},
    {name:'置业需求',value:'3'},
    {name:'客户画像',value:'4'}
  ],
  infoType:'',
  deleteTableList:[],
  currentBuilding:''
 }
},
computed: {},
watch: {},
methods: {
 initDate(){
  this.$nextTick(() => {
     this.onresizeHeight =window.innerHeight - this.$refs.TableHeight.$el.offsetTop - 320;
  });
  this.getBuildingByPhone();
  this.titleListM = this.$tool.deepClone(this.titleList);
 },
 //获取当前登录人的案场
 getBuildingByPhone(){
    buildByPhone({}).then(res=>{
      console.log("获取案场列表",res);
      if(res.list && res.list.length>0){
        this.buildings = res.list;
        this.getTableList(JSON.parse(this.$tool.getStorage('caseBuildingId')))
        this.buildingselected = JSON.parse(this.$tool.getStorage('caseBuildingId'));
      }
    })
 },
//获取台账列表
 getTableList(buildingId){
   
   if(buildingId){
    this.$tool.setStorage({ caseBuildingId: JSON.stringify(buildingId)});
    this.pageData.current = 1;
    this.buildingId = buildingId;
    this.currentBuilding = this.buildings.find(item=>item.buildingId ==buildingId ).buildingAlias
   }else buildingId = JSON.parse(this.$tool.getStorage('caseBuildingId'))
   getStandingBookGetAllBuildPages({
       page:this.pageData.current,
       rows:this.pageData.rows,
       infoType:this.infoType==0?'':this.infoType,
       buildingId
   }).then(res=>{
     console.log("获取案场台账列表",res);
     if(!res|| res.pageData.length<1)return (this.data = []) && (this.pageData.total=0);
     this.data = res.pageData;
     this.pageData.total = res.total-0;
     this.allLen = res.total-0;

   })
 },
 //获取台账列表（分组）
 getTableListGroup(){
   getstandingBookGetGroup({buildingId:this.buildingId,type:2}).then(res=>{
     console.log("获取分类列表",res);
     for (const key in res) {
      let count = 0
        res[key].map((it,index)=>{
          it._disabled = it.fieldType == 2 || it.fieldType == 1;
          if(it.fieldType == 1){
            count++
          }
          return count
        });
        res[key].map((it,index)=>{
          it.count = count
        });
        this.dataArray = this.dataArray.concat(res[key])
     }
     this.dataObj = Object.assign({},this.dataObj,res);
     this.data1 = this.$tool.deepClone(this.dataArray)
     this.changeMoudleTable(this.crruentTabObj,this.crruentTabindex)
   })
 },
 //获取所有台账
 getTableListAll(){
   getstandingBookListBase({}).then(res=>{
     console.log(this.dataArray);
     this.data2 = res.filter(item=>{
       let i = this.dataArray.findIndex(it=>it.dbKey == item.dbKey);
       console.log(i);
       return i<0;
     })
      console.log("所有台账字段不分页",res,this.data2)     
   })
 },
 //修改当前是否必填
 changeIfrequird(mess,flag){
    let {standingBookBuildingId,infoType}= mess,dataT = this.titleList.filter(item=>item.value == infoType),type=dataT.length>0?dataT[0].key:'';
    this.dataArray.map(item=>item.standingBookBuildingId == standingBookBuildingId && (item.ifRequired=flag?1:2));
    this.dataObj[type].map(item=>item.standingBookBuildingId == standingBookBuildingId && (item.ifRequired=flag?1:2));
 },
 //字段修改保存
 saveTableDatail(){
   console.log(this.dataObj);
   if(this.saveTableflag) return;
   this.saveTableflag = true;
   let standingBookBuildingRemoveIds = this.deleteTableList,standingBookCompanyAddDTOS=[],standingBookCompanyEditDTOS=[];
   for (const key in this.dataObj) {
      this.dataObj[key].map(item=>{
        let params = {serialNo:item.serialNo-0,ifRequired:item.ifRequired-0,fieldKey:item.fieldKey};
        item.type == "add"
          ?(params.standingBookCompanyId =item.standingBookCompanyId)&& standingBookCompanyAddDTOS.push(params)
          :(params.standingBookBuildingId =item.standingBookBuildingId) && standingBookCompanyEditDTOS.push(params)
      })
   }
   let params = {
     buildingId:this.buildingselected 
   }
   standingBookBuildingRemoveIds.length>0 && (params.standingBookBuildingRemoveIds = standingBookBuildingRemoveIds);
   standingBookCompanyAddDTOS.length>0 && (params.standingBookCompanyAddDTOS = standingBookCompanyAddDTOS);
   standingBookCompanyEditDTOS.length>0 && (params.standingBookCompanyEditDTOS = standingBookCompanyEditDTOS);
   console.log(params,'字段修改保存参数')
   updateStandingBookUpdate(params).then(res=>{
     console.log("排序结果",res);
     setTimeout(() => {
       this.saveTableflag = false;
     }, 5000);
     this.modal = false;
     this.deleteTableList=[];
     this.$Message.success("本案台账字段编辑成功");
     this.getTableList();
   }).catch(err=>{
     this.saveTableflag = false;
   })
   this.changeTable(this.crruentTabObj,this.crruentTabindex)
 },
 pageOnChangeFun(pages){
   this.pageData.current = pages;
   this.getTableList();
 },
 pageOnPageSizeChangeFun(rows){
   this.pageData.rows = rows;
   this.pageData.current = 1;
   this.getTableList();
 },
 //切换表格table
 changeTable(item,index){
   console.log(item,'切换表格');
   this.crruentTabindex = index;
   this.crruentTabObj = item;
   this.titleList.map(item=>item.selected = false);
   this.titleList[index].selected = true;
  //  item.selected = true;
   this.infoType = item.value;
   this.pageData.current = 1;
   this.getTableList();
 },
 //切换模态框table
 changeMoudleTable(item,index){
   console.log(item,'我是切换');
   this.crruentTabindex = index;
   this.crruentTabObj = item;
   this.titleListM.map(item=>item.selected = false);
  //  item.selected = true;
   this.titleListM[index].selected = true;
   this.currentMoudleSelected = item.key;
   let i = this.columns1.findIndex(im=>im.key == "move");  
   if(i>=0 && item.key === "all") this.columns1.splice(i,1) && (this.columns1[this.columns1.length-1].minWidth = 280)
   else if(i<0 && item.key !== "all")(this.columns1[this.columns1.length-1].minWidth = 180) && this.columns1.push(this.moveTable)
   this.data1 = item.key === "all"?this.dataArray:this.dataObj[item.key];

   console.log(this.data1,'我是数据');
   this.allLen = this.data1.length;
   this.chooseLen = 0;
   this.selectedArray =[];
   console.log(this.selectedArray,'this.selectedArray');
   
 },
 //编辑
 editField(){
   this.titleListM.map(item=>item.selected = false);
   this.titleListM[this.crruentTabindex].selected = true;
   this.dataArray = [];
   this.dataObj = {
    baseInfoVos:[],
    buyDemandVos:[],
    customerInfoVos:[],
    serviceInfoVos:[]
   };
   let index = this.columns1.findIndex(item=>item.key == "move");
   index>-1 && this.columns1.splice(index,1) && (this.columns1[this.columns1.length-1].minWidth = 280)
   this.getTableListGroup();
   //index<0 && this.columns1.push(this.moveTable)
   this.modal = true;  
   //this.titleListM = this.$tool.deepClone(this.titleList);

 },
 deleteField(){
   if(this.selectedArray.length<1)return this.$Message.warning("请选择要删除的选项");
   this.$Modal.confirm({
    title:'删除字段' ,
    content:"是否将字段从本案台账移除？" ,
    onOk:()=>{
      console.log(this.selectedArray);
      this.selectedArray.map(item=>{
        this.checkTableData(item,'delete')
      });
      this.selectedArray.length = 0;
    }
   })   
 },
 //对字段进行处理
 checkTableData(data,type,mess){
   this.allLen = this.allLen - this.chooseLen;
   this.chooseLen = 0;
   let index = this.dataArray.findIndex(em=>em.standingBookBuildingId == data.standingBookBuildingId),
   flag = this.nameCompare[data.infoType-1],
   currentData = this.dataObj[flag],
   index1 = currentData.findIndex(item=>item.standingBookBuildingId == data.standingBookBuildingId)
     console.log(index,index1,currentData,data,this.currentMoudleSelected , flag)
    if(type == "delete"){//删除
     this.dataArray.splice(index,1);
     currentData.splice(index1,1);
     this.deleteTableList.push(data.standingBookBuildingId);
     this.currentMoudleSelected == flag?this.data1 = currentData:this.data1=this.dataArray;
    }else if(type == "add"){
       let num = currentData[currentData.length-1],numMax = num?num.serialNo-0+1:1;
       data.serialNo = numMax;
       this.dataArray.push(data);
       currentData.push(data);
      this.currentMoudleSelected == flag?this.data1 = currentData:this.data1=this.dataArray;
    }
 },
 //字段加入
 joinBuild(){
   this.getTableListAll();
   this.modalAdd = true;

 },
 //上移
 moveUpName(mess){
   let index = mess._index;
   if(index == 0)return;
   let arr = this.dataObj[this.currentMoudleSelected],a1=arr[index-1].serialNo,a2=arr[index].serialNo;
   arr[index-1] = arr.splice(index, 1, arr[index-1])[0];
   arr[index].serialNo=a2;
   arr[index-1].serialNo=a1;
   this.data1 = this.dataObj[this.currentMoudleSelected];
   console.log(this.dataObj)
 },
 //下移
 moveDownName(mess){
   let index = mess._index-0;
   if(index == this.data1.length-1)return;
   let arr = this.dataObj[this.currentMoudleSelected],a1=arr[index].serialNo,a2=arr[index+1].serialNo;
   arr[index] = arr.splice(index-0+1, 1, arr[index])[0];
   arr[index].serialNo=a1;
   arr[index+1].serialNo=a2;
   this.data1 = this.dataObj[this.currentMoudleSelected];
   console.log("下移")
 },
 //关闭模态框
 chancleMoudle(){
   let index = this.dataArray.findIndex(item=>item.type == "add");
   console.log(this.deleteTableList,index)
   this.deleteTableList.length>0 || index>-1?this.$Modal.confirm({
      title:'确认是否关闭',
      content:`你对本案台账做了${this.deleteTableList.length>0 && index>-1?'删除和新增操作':index>-1?"新增操作":'删除操作'}， 如果关闭将对操作不做保存。您确定关闭么`,
      onOk:()=>{this.modal = false;this.deleteTableList=[];}
   }):this.modal = false; 
    this.changeTable(this.crruentTabObj,this.crruentTabindex)
 },
 //筛选发生变化
 selectedChange(e,M){
   console.log(e,'筛选');
   this.chooseLen = e.length;
   this.selectedArray = e;
 },
 //加入字段 取消
 chancleAddMoudle(){
   this.addSelected.length = 0;
 },
 //加入字段 确定
 addMoudleField(){
   if(this.addSelected.length<1)return this.$Message.warning("请选择要添加的选项");
   this.addSelected.map(item=>{
      let index = this.data2.findIndex(it=>it.standingBookCompanyId = item.item);
      this.data2.splice(index,1);
      item.type = "add";
     item.standingBookBuildingId = item.standingBookCompanyId;
      this.checkTableData(item,'add');
   })
   this.modalAdd = false;
   this.addSelected.length=0;
   this.chooseLen = 0;
 },
 //加入字段 选中
 selectedChangeAdd(e){
    this.addSelected = e;
 }
},
created() {
  this.initDate();
},
mounted() {
 window.onresize = () => {
      return (() => {
        setTimeout(() => {
          this.onresizeHeight =window.innerHeight - this.$refs.TableHeight.$el.offsetTop - 320;
        }, 10);
      })();
    };
},
}
</script>
<style lang='scss' scoped>
 .fieldList{
  &_selects{
    overflow: hidden;
  } 
  &_tableBox{
    min-height: 200px;
  }
  &_buildSelected{
    float: left;
    width: 200px;
    margin-bottom: 20px;  
  }  
  &_buttonEdit{
    float: right;
    margin-right: 20px;
  }
  &_title{
    font-size: 18px;
    margin-right: 24px;
    font-weight: 700;
    cursor: pointer;    
  }
  &_title.actived{
      color: #2d8cf0;
  }
  &_titleList{
    margin-bottom: 20px;
  }
  
   .pagePublicStyle{
    text-align: right;
    padding: 14px 0;
    margin-right: 30px;
  }
  .totalCount{
    float: left;
    line-height: 34px;
    padding-left: 20px;  
  }
 }
 .tabTop{
   /deep/.ivu-form-item-label{
    width: 340px!important;
    margin-top: -20px;
   }
  }
  .moudle_cancelButton{
      margin-right: 20px;
  }
  /deep/.ivu-tabs{
      overflow: initial;
  }
  .modal_buttons{
    text-align: right;
    overflow: hidden;  
    margin: 10px 0;
  }
  .modal_buttons_span{
     float: left;
  }
  .module_tables{
    display: flex;
    border: 1px solid #ccc;  
  }
  .module_tables_left{
    flex: 0 0 120px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #ccc;
    text-align: center;  
    padding: 10px 0;
  }
  .module_tables_title{
    font-size: 18px;
    margin-bottom: 18px;
    font-weight: 700;
    cursor: pointer;  
  }
  .module_fotter{
    margin-top: 20px;
    text-align: right;
  }
  .module_tables_title.actived{
      color: #2d8cf0;
  }
   /deep/.ivu-tooltip-inner{
      min-height: auto;
      white-space: break-spaces;
  }
</style>